<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <p>username:{{username}}</p>
        <p>age:{{age}}</p>
        <h3>$</h3>
        <p>{{$el}}</p>
        <h3>_</h3>
        <p>{{_data}}</p>
        <h3>Vue原型对象身上的属性和方法</h3>
        <p>{{aa}}</p>
    </div>
    <script>
        Vue.prototype.aa = 1010101
        let data = {
            username:'laozhang',
            age:20
        }
        const vm = new Vue({
            el:'#demo',
            // data:{
            //     /**
            //      * data中定义的数据，不知道怎么回事儿，出现在了vm的实例对象身上
            //      * 模板中使用{{}} 插值表达式，可以渲染data中的数据？
            //      * 因为{{变量名}} ==> 会上vm的实例对象身上去找对应的属性，找到了将值替换掉{{变量名}}，进行渲染
            //      * 
            //      */
            //     username:'atguigu',
            //     age:10
            // }
            data:data
        })
        console.log('vm: ', vm)

        console.log(data === vm._data)
    </script>
</body>

</html>